{% extends '../../admin/layout.html' %}

{% block body %}

<style type="text/css">
    /* drag */
    #drag .content{overflow:hidden;margin:0 5px;}

    #f_container{border: 1px solid #999999;position: absolute;top:10px;left: 10px;z-index: 1000;    }
    #container{width:410px;overflow: hidden;height: 30px;background:#F2F3F5;border: 5px solid #F2F3F5; }
    #container select{border: 1px solid #ccc;}
</style>

<section class="content-header">
    <h1>
        信息点管理
        <small></small>
    </h1>
</section>


<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">新增信息点</h3>
                </div>
                <!-- form start -->
                <form method="post" action="#" class="form-horizontal" id="add_form" enctype="text/plain">
                    <div class="box-body">
                        <input class="form-control" name="id" placeholder="" value="{{mapmark._id}}"
                               type="hidden">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">标题</label>

                            <div class="col-sm-10">
                                <input class="form-control" name="title" placeholder="" value="{{mapmark.title}}"
                                       type="text">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址</label>

                            <div class="col-sm-10">
                                <textarea class="form-control" name="address"
                                          rows="5">{{mapmark.address}}</textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">选择坐标</label>

                            <div class="col-sm-10">
                                <input type="button" value="开始标注" id="biaozhu" onclick="show()" style="width:100px;height:30px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">经度</label>

                            <div class="col-sm-10">
                                <input class="form-control" name="latitude" id="latitude" placeholder="" value="{{mapmark.latitude}}"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">纬度</label>

                            <div class="col-sm-10">
                                <input class="form-control" name="longitude" id="longitude" placeholder="" value="{{mapmark.longitude}}"
                                       type="text">
                            </div>
                        </div>



                        <div class="form-group">
                            <label class="col-sm-2"></label>

                            <div class="col-sm-10">
                                <div style="color: #dd4b39">最佳尺寸：350*200px</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">封面图片</label>

                            <div class="col-sm-10">
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <div class="fileupload-new img-thumbnail">
                                        {% if mapmark.cover==undefined %}
                                        <img src="/admin/static/dist/img/noimage.gif">
                                        <input class="form-control" name="cover" id="cover" placeholder=""
                                               value=""
                                               type="hidden">
                                        {% else %}
                                        <img src="{{mapmark.cover.url}}">
                                        <input class="form-control" name="cover" id="cover" placeholder=""
                                               value="{{mapmark.cover.id}}"
                                               type="hidden">
                                        {% endif %}

                                        <div class="edit_pic_mask">
                                            <i class="fa fa-plus-circle" onclick="imageUploader(this,false)"></i>
                                            <i class="fa fa-minus-circle" onclick="removeImage(this,false)"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-2">状态</label>

                            <div class="col-md-7">
                                <label class="radio-inline">
                                    <input name="status" type="radio" {% if mapmark.status==1 %}checked="checked" {% endif %}
                                    value="1"><span>开启</span></label>
                                <label class="radio-inline">
                                    <input name="status" type="radio" {% if mapmark.status==0 %}checked="checked" {% endif %}
                                    value="0"><span>关闭</span></label>
                            </div>
                        </div>

                    </div>

                    <div class="box-footer">
                        <div class="col-sm-2">
                            <button type="button" id="btnSave" class="btn btn-block btn-danger">保存</button>
                        </div>

                        <div class="col-sm-2">
                            <button type="button" class="btn btn-block btn-default" onclick="history.go(-1)">取消
                            </button>
                        </div>
                    </div>

                </form>
            </div>
            <!-- /.box -->
        </div>
        <!--/.col (right) -->
    </div>
</section>


<div id="drag" style="display: none">
    <div class="content">
        <div id="f_container">
            <div id="container"></div>
        </div>
        <div id="allmap" style="width:1000px;height:700px;"></div>
    </div>
</div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=826e806b86676d155282de3d37188137"></script>
<script src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.4/src/CityList_min.js"></script>

<script type="text/javascript">
    var marker;
    // 百度地图API功能
    var map = new BMap.Map("allmap");            // 创建Map实例
    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));    // 右下比例尺
    map.setDefaultCursor("Crosshair");//鼠标样式
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));  //右上角，仅包含平移和缩放按钮
    let cityList = new BMapLib.CityList({
        container: 'container',
        map: map
    });
    map.addEventListener("click", showInfo);
    function showInfo(e){
        map.clearOverlays();
        marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 创建标注
        map.addOverlay(marker);
        //获取经纬度
        document.getElementById("longitude").value = e.point.lng;
        document.getElementById("latitude").value = e.point.lat;
    }

    function show(){
        map.centerAndZoom('广州番禺职业技术学院',15);                   // 初始化地图,设置城市和地图级别。
        // oDrag.style.display = "block";
        layer.open({
            type: 1,
            title:'地图坐标选择',
            btn: ['取消','确定'], //按钮
            closeBtn: 0,
            skin: 'layui-layer-rim', //加上边框
            area: ['1050px', '750px'], //宽高
            // shadeClose: true,
            content: $('#drag'),
            btn1:function(){

            },
            cancel: function(){
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    }

</script>


<script type="text/javascript">
    $(document).ready(function () {

        let lng = document.getElementById("longitude").value;
        let lat = document.getElementById("latitude").value;
        map.centerAndZoom(new BMap.Point(lng, lat), map.getZoom());
        marker= new BMap.Marker(new BMap.Point(lng, lat));  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中

    });
</script>


<script>
    $(document).ready(function () {
        $("#btnSave").click(function () {
            doPost();
        });
    });

    function doPost() {
        const index = layer.load(0, {time: 5 * 1000}); //显示加载中动画，最多5秒自动关闭
        $.ajax({
            type: "post",
            url: `/datacenter/mapmark/add`,
            data: $("#add_form").serializeArray(),
            beforeSend: function (xhr) {
                xhr.setRequestHeader('x-pjax', 'true');
            },
            success: function (data) {

                if (data.errno === 0) {
                    layer.msg(data.msg, {icon: 1});
                    location.href = data.data;
                } else {
                    layer.msg(data.errmsg, {icon: 2});
                }

                layer.close(index); //关闭加载动画
            },
            error: function (xhr) {
                layer.close(index); //关闭加载动画
                layer.msg('通讯失败！请重试！', {icon: 2});
            }
        });
    }
</script>
{% endblock %}

